---
title: Avatar
description: It’s more than a picture with curved corners. It’s a vibe, subtly revealing secrets. A cheeky peek into depth, grabbing more than just your gaze.
order: 1
published: true
---

## Basic
It ain't just a pic with curved corners, for real. It's the whole vibe, whispering secrets without a peep. A cheeky sneak into the deep, snatching more than your eyes can peep.
<How toUse="media/avatar/avatar-basic-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/avatar
```

## Manual installation
<SourceCode toShow='avatar'/>

## Anatomy
```
import { Avatar } from "@/components/ui/avatar"

<Avatar
  src="https://intentui.com/images/avatar/slash.jpg"
  alt="Slash"
  initials="Sl"
/>
```

## Fallback
If the image fails to load, the avatar will fallback to the initials.
<How toUse="media/avatar/avatar-initials-demo" />

## Shape
By default, the avatar is a `circle`. You can change it to a square by using the `isSquare` props.

<How toUse="media/avatar/avatar-shape-demo" />

## Size
By default, the avatar is medium. You can change it to small, large or extra-large by using the `size` prop.

<How toUse="media/avatar/avatar-size-demo" />

## Avatar group
You can use the `AvatarGroup` component to display a group of avatars.

<How toUse="media/avatar/avatar-group-demo" />
